<template>
	<view class="page">
    <div class="page-content my-page">
      <div class="userinfo-box">
        <u-avatar :src="$baseUrl + userInfo.avatar" size="large"></u-avatar>
        <div class="userinfo" v-if="userInfo.id">
          <div class="nickname">{{ userInfo.nickname }}</div>
          <div class="phone">账号：{{ userInfo.username}}</div>
        </div>
        <div class="userinfo" v-else @click="login">
          <div class="nickname">去登录</div>
        </div>
        <div class="setting-box" v-if="userInfo.id">
          <u-icon  @click="toPage('/pages/my/info')" size="64rpx" name="setting-fill" color="rgb(254, 129, 5)"></u-icon>
        </div>
      </div>
      <div class="c-card">
        <u-row :gutter="16">
          <u-col span="4">
            <div class="cell-item" @click="toPage('/pages/my/fish')">
              <div class="cell-icon">
                <div style="width: 120rpx;height: 100rpx;display: flex;align-items: center;justify-content: center">
                <image style="width: 80rpx;height: 60rpx" src="@/static/yu.png"></image>
                </div>
                <div class="dot">{{ userInfo.my_fish }}</div>
              </div>
              <div class="cell-name">我的鱼获</div>
            </div>
          </u-col>
          <u-col span="4">
            <div class="cell-item" @click="toPage('/pages/my/cost')">
              <div class="cell-icon">
                <div style="width: 120rpx;height: 100rpx;display: flex;align-items: center;justify-content: center">
                  <image style="width: 65rpx;height: 65rpx" src="@/static/qianbao.png"></image>
                </div>
                <div class="dot">{{ userInfo.my_cost }}</div>
              </div>
              <div class="cell-name">我的花费</div>
            </div>
          </u-col>
          <u-col span="4">
            <div class="cell-item"  @click="toPage('/pages/my/data')">
              <div class="cell-icon">
                <div style="width: 120rpx;height: 100rpx;display: flex;align-items: center;justify-content: center">
                  <image style="width: 65rpx;height: 65rpx" src="@/static/shuju.png"></image>
                </div>
                <div class="dot">{{ userInfo.my_data }}</div>
              </div>
              <div class="cell-name">我的数据</div>
            </div>
          </u-col>
        </u-row>
      </div>
      <div class="c-card">
        <u-tabs :list="list" item-width="120" :is-scroll="false" :current="current" @change="change" active-color="rgb(254, 129, 5)"></u-tabs>
        <div class="data-content">
          <u-row :gutter="16">
            <u-col span="3" v-for="item in dataList">
              <div class="cell-item" :style="{ opacity: item.count ? '1' : '0.5'}">
                <div class="cell-icon">
                  <div style="width: 80rpx;height: 80rpx">
                    <image style="width: 80rpx;height: 80rpx" :src="$baseUrl + item.image"></image>
                  </div>
                  <div class="dot" :style="{ backgroundColor: item.count ? 'rgb(254, 129, 5)' : 'rgba(0, 0, 0,0.5)'}">{{ item.count }}</div>
                </div>
                <div class="cell-name">{{ item.name }}</div>
              </div>
            </u-col>
          </u-row>
        </div>
      </div>
    </div>
    <Tabbar :current="4"/>
  </view>
</template>

<script>
    import Tabbar from '@/components/tabbar.vue'
    export default {
    components: {
      Tabbar
    },
		data() {
			return {
        $baseUrl: this.$baseUrl,
        list: [
          { name: '解锁鱼获' },
          { name: '解锁路亚' }
        ],
        current: 0,
        userInfo: {
          id: '',
          avatar: '',
          nickname: '',
          username: '',
          // 我的鱼获
          my_fish: 0,
          // 我的花费
          my_cost: 0,
          // 我的数据
          my_data: 0
        } ,
        dataList: [

        ]
			}
		},
      onShow() {
        if (!this.$store.state.userInfo.id) {
          return
        }
        this.$api.getMemberInfo({
          id: this.$store.state.userInfo.id,
        }).then(res => {
          this.userInfo = res
        })
        this.change(0)
      },
		methods: {
      change(e) {
        this.current = e
        if (!this.$store.state.userInfo.id) {
          return
        }
        if (e === 0) {
          this.$api.getMyFishList({
            member_id: this.$store.state.userInfo.id,
          }).then(res => {
            this.dataList = res.map(item => {
              return {
                name: item.name,
                image: item.image,
                count: item.fishCatches.length
              }
            })
          })
        } else {
          this.$api.getMyLureList({
            member_id: this.$store.state.userInfo.id,
          }).then(res => {
            this.dataList = res.map(item => {
              return {
                name: item.name,
                image: item.image,
                count: item.fishCatches.length
              }
            })
          })
        }
      },
      toPage(url) {
        uni.navigateTo({
          url
        })
      },
      login() {
        uni.navigateTo({
          url: '/pages/user/login'
        })
      }
		}
	}
</script>

<style lang="scss">
.my-page {
  padding: 20rpx;
  .c-card {
    background-color: #ffffff;
    border-radius: 14rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    .data-content {
      padding: 20rpx 0;
    }
    .cell-item {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .cell-icon {
        position: relative;
        .dot {
          position: absolute;
          top: 10rpx;
          right: -20rpx;
          padding: 5rpx 10rpx;
          line-height: 20rpx;
          font-size: 20rpx;
          background-color: rgb(254, 129, 5);
          border-radius: 50%;
          color: #ffffff;
        }
      }
      .cell-name {
        line-height: 40rpx;
        text-align: center;
        font-size: 28rpx;
        color: #333333;
      }
    }
  }
  .userinfo-box {
    padding: 20rpx;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    .setting-box {
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .userinfo {
      margin-left: 20rpx;
      .nickname {
        font-size: 32rpx;
        color: #333;
        font-weight: bold;
      }
      .phone {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}
</style>
